<!DOCTYPE html>
<html>
<head>
    <title>Fruitclick</title>

    <script type="text/javascript">
        FruitclickModule = null;
        statusText = 'NO-STATUS';

        canvas = null;
        context = null;
        apple = null;
        background = null;
        crash = null;
        crunch = null;
        logger = null;

        function moduleDidLoad() {
            FruitclickModule = document.getElementById('fruitclick');
            updateStatus('SUCCESS');

            canvas = document.getElementById('fruitclickCanvas');
            if(canvas.getContext) {
                canvas.addEventListener("click", onTouch, false);
                context = canvas.getContext('2d');
                context.font = "18pt Arial";
                simulate();
            }
        }
        
        function onTouch(e) {
            var coords = getCursorPosition(e);
            var x = coords[0];
            var y = canvas.height - coords[1];
            var message = "touch " + x.toString() + " " + y.toString();
            FruitclickModule.postMessage(message);
        }
        
        function getCursorPosition(e) {
            var x;
            var y;
            if (e.pageX || e.pageY) {
                x = e.pageX;
                y = e.pageY;
            }
            else {
                x = e.clientX + document.body.scrollLeft +
                   document.documentElement.scrollLeft;
                y = e.clientY + document.body.scrollTop +
                   document.documentElement.scrollTop;
            }
            x -= canvas.offsetLeft;
            y -= canvas.offsetTop;

            return [x, y];
        }
        
        function simulate() {
            FruitclickModule.postMessage('render');
            setTimeout("simulate()", 20);
        }
	
        function beginDraw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
	
        function draw(id, x, y, angle) {
            y = canvas.height - y;
            var image = null;
            switch(id) {
            case 0:
                image = apple;
                break;
            case 1:
                image = background;
                break;
            }

            context.translate(x, y);
            context.rotate(-angle);
            context.drawImage(image, -image.width/2, -image.height/2);
            context.rotate(angle);
            context.translate(-x, -y);
        }

        function drawText(text, x, y) {
            y = canvas.height - y;
            context.fillText(text, x, y);
        }

        function playSound(id) {
            var sound = null;
            switch(id) {
            case 0:
                sound = crunch;
                break;
            case 1:
                sound = crash;
                break;
            }

            sound.currentTime = 0;
            sound.play();
        }

        function log(text) {
            logger.innerHTML += "<br/>" + text;
        }

        function handleMessage(message_event) {
            params = message_event.data.split("|");
            if (params[0] == "draw") {
                draw(parseInt(params[1]), parseInt(params[2]), parseInt(params[3]), parseFloat(params[4]));
            }
            else if (params[0] == "drawText") {
                drawText(params[1], parseInt(params[2]), parseInt(params[3]));
            }
            else if (params[0] == "playSound") {
                playSound(parseInt(params[1]));
            }
            else if (params[0] == "log") {
                log(params[1]);
            }
        }

        function pageDidLoad() {
            apple = new Image();
            apple.src = "apple.png";
            background = new Image();
            background.src = "background.png";
            crash = new Audio("crash.mp3");
            crunch = new Audio("crunch.mp3");
            logger = document.getElementById('log_field');

            if (FruitclickModule == null) {
                updateStatus('LOADING...');
            } else {
                updateStatus();
            }
        }

        function updateStatus(opt_message) {
            if (opt_message)
                statusText = opt_message;
            var statusField = document.getElementById('status_field');
            if (statusField) {
                statusField.innerHTML = statusText;
            }
        }
  </script>
</head>
<body onload="pageDidLoad()">
    <h3><a href="http://code.google.com/p/fruitclick/">Fruitclick</a> (Native Client)</h3>
    <h4>Status: </h4>
    <div id="status_field">NO-STATUS</div>
    <div id="listener">
        <script type="text/javascript">
            var listener = document.getElementById('listener');
            listener.addEventListener('load', moduleDidLoad, true);
            listener.addEventListener('message', handleMessage, true);
        </script>

        <embed name="nacl_module"
            id="fruitclick"
            width=0 height=0
            src="fruitclick.nmf"
            type="application/x-nacl" />
    </div>

    <canvas id="fruitclickCanvas" width="320" height="480">
        <p>Your browser doesn't support canvas.</p>
    </canvas>
    <div id="log_field"></div>

</body>
</html>
